<template>
    <div class="title_container">
        <h1 class="title_text">消费类目TOP</h1>
        <div class="title_flex">
            <div class="title_radio" style="margin-right: 20px;">
                <el-radio-group v-model="radioIgnore" @change="radioIgnoreChange">
                    <el-radio-button v-for="item in radioIgnoreList" :label="item.label" :value="item.value" />
                </el-radio-group>
            </div>
            <div class="info_icon">
                <el-tooltip effect="dark" content="默认本月分析">
                    <el-icon>
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="title_radio">
                <el-radio-group v-model="radioTime" @change="radioTimeChange">
                    <el-radio-button v-for="item in radioTimeList" :label="item.label" :value="item.value" />
                </el-radio-group>
            </div>
            <div class="title_date">
                <el-date-picker v-model="customTime" @change="customTimeChange" type="datetimerange"
                    start-placeholder="Start date and time" end-placeholder="End date and time" clearable />
            </div>
        </div>
    </div>
    <div v-if="categoryData.length && spendingRankData.length && pieProportionData.length">
        <CategoryAnalysis :categoryData="categoryData" />
        <div class="charts">
            <SpendingAmountRanking class="chart_part" :spendingRankData="spendingRankData" />
            <PieChartProportion class="chart_part" :pieProportionData="pieProportionData" />
        </div>
    </div>
    <div v-if="categoryData.length === 0">
        <el-empty description="No Data" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, type Ref } from "vue";
import { getCategoryDataAPI, getSpendingRankDataAPI, getPieProportionDataAPI } from "src/httpApi/dataAnalysisHttp"
import CategoryAnalysis from "./CategoryAnalysis.vue";
import SpendingAmountRanking from "./SpendingAmountRanking.vue";
import PieChartProportion from "./PieChartProportion.vue";

const radioTimeList = [
    { label: "今日分析", value: "day" },
    { label: "本周分析", value: "week" },
    { label: "本月分析", value: "month" },
    { label: "今年分析", value: "year" },
];

const radioIgnoreList = [
    { label: "过滤忽略", value: 1 },
    { label: "取消过滤", value: 0 },
];

// 类目数据分析
const categoryData: Ref<{ name: string; value: number }[]> = ref([]);
// 排名前十分析数据
let spendingRankData: any = ref([]);
// 饼图数据分析
let pieProportionData: any = ref([]);

const radioTime = ref("month");
const radioIgnore = ref(0);
const customTime = ref<[Date, Date]>([new Date(), new Date()]);
const selectTime = ref<[number, number]>([new Date().getTime(), new Date().getTime()]);

// 单选框时间选择触发函数
const radioTimeChange = (value: string) => {
    const now = new Date();
    let startTime: Date;

    switch (value) {
        case "day":
            // 今天的开始时间
            startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            break;
        case "week":
            // 本周的开始时间（周一）
            const firstDayOfWeek = now.getDate() - now.getDay() + 1; // 周一的日期
            startTime = new Date(now.getFullYear(), now.getMonth(), firstDayOfWeek);
            break;
        case "month":
            // 本月的开始时间
            startTime = new Date(now.getFullYear(), now.getMonth(), 1);
            break;
        case "year":
            // 今年的开始时间
            startTime = new Date(now.getFullYear(), 0, 1);
            break;
        default:
            // 默认为当前时间
            startTime = new Date();
            break;
    }

    const endTime = now;
    selectTime.value = [startTime.getTime(), endTime.getTime()];
    // console.log(timestampRange); // 输出13位时间戳数组
    getData();
};

// 单选框选择是否忽略触发函数
const radioIgnoreChange = (value: string) => {
    console.log(value);
    const params = {
        timestampRange: [selectTime.value[0], selectTime.value[1]],
        ignore: value,
    }
    getData();
};

// 自定义时间框选择触发函数
const customTimeChange = (value: [Date, Date]) => {
    // 将日期转换为13位时间戳
    const timestampRange = value.map((date) => date.getTime());
    // console.log(timestampRange); //[1724256000000,1724774400000]
    getData();
};

// 获取数据
const getData = () => {
    const params = {
        timestampRange:selectTime.value,
        ignore: radioIgnore.value,
    }
    getCategoryData(params);
    getSpendingRankData(params);
    getPieProportionData(params);
};

const getCategoryData = async (timestampRange: {}) => {
    const res = await getCategoryDataAPI(timestampRange);
    categoryData.value = res.result;
};
const getSpendingRankData = async (timestampRange: {}) => {
    const res = await getSpendingRankDataAPI(timestampRange);
    spendingRankData.value = [...res.result];
};
const getPieProportionData = async (timestampRange: {}) => {
    const res = await getPieProportionDataAPI(timestampRange);
    pieProportionData.value = [...res.result];
};


// 组件加载时自动请求数据
onMounted(() => {
    const now = new Date();
    selectTime.value = [new Date(now.getFullYear(), now.getMonth(), 1).getTime(), now.getTime()];
    getData();
});
</script>

<style scoped>
.title_container {
    display: flex;
    justify-content: space-between;

    .title_text {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
    }

    .title_flex {
        margin-top: 24px;
        display: flex;

        .title_date {
            margin-left: 20px;
        }

        .info_icon {
            margin-top: 4px;
            margin-right: 12px;
            font-size: 24px;
        }
    }
}

.charts {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;

    .chart_part {
        flex: 1;
    }
}
</style>
